<template>
  <div class="container">
    <!-- 左侧菜单 -->
    <div class="left" style="width: 25%;">
      <!-- 线 -->
      <img src="../assets/shouye/zsx1.svg" alt="" class="left-line1">
      <img src="../assets/shouye/zsx1.svg" alt="" class="left-line2">
      <img src="../assets/shouye/zsx1.svg" alt="" class="left-line3">
      <!-- 左上 -->
      <RouterLink class="lefttop" to="/shiyu">
        <img :src="menuImgSrc1" alt="" class="menu-img1" @mouseover="over1" @mouseleave="leave1">
        <h3>智慧识鱼</h3>
      </RouterLink>
      <!-- 左下 -->
      <RouterLink class="leftbottom" to="/fishku">
        <!-- <img src="../assets/shouye/21.svg" alt="" class="menu-img2"> -->
        <img :src="menuImgSrc2" alt="" class="menu-img2" @mouseover="over2" @mouseleave="leave2">
        <h3>种质标本库</h3>
      </RouterLink>
    </div>
    <!-- 中间地图 -->
    <div class="middle-map" style="width: 48%;">
      <ZhanjiangMap />
    </div>
    <!-- 右侧菜单 -->
    <div class="right" style="width: 25%;">
      <!-- 线 -->
      <img src="../assets/shouye/zsx1.svg" alt="" class="right-line1">
      <img src="../assets/shouye/zsx1.svg" alt="" class="right-line2">
      <img src="../assets/shouye/zsx1.svg" alt="" class="right-line3">
      <!-- 右上 -->
      <RouterLink class="righttop" to="/fishill">
        <!-- <img src="../assets/shouye/31.svg" alt="" class="menu-img3"> -->
        <img :src="menuImgSrc3" alt="" class="menu-img3" @mouseover="over3" @mouseleave="leave3">
        <h3>鱼病诊断</h3>
      </RouterLink>
      <!-- 右下 -->
      <RouterLink class="rightbottom" to="/jiankong">
        <!-- <img src="../assets/shouye/41.svg" alt="" class="menu-img4"> -->
        <img :src="menuImgSrc4" alt="" class="menu-img4" @mouseover="over4" @mouseleave="leave4"></img>
        <h3>养殖监控</h3>
      </RouterLink>
    </div>
  </div>
</template>

<script>
import ZhanjiangMap from '@/components/map.vue';
import img11 from '@/assets/shouye/11.svg'; 
import img12 from '@/assets/shouye/12.svg';
import img21 from '@/assets/shouye/21.svg';
import img22 from '@/assets/shouye/22.svg';
import img31 from '@/assets/shouye/31.svg';
import img32 from '@/assets/shouye/32.svg';
import img41 from '@/assets/shouye/41.svg';
import img42 from '@/assets/shouye/42.svg';
import { RouterLink } from 'vue-router';

export default {
  components: { ZhanjiangMap },
  data() {
    return {
      menuImgSrc1: img11,
      menuImgSrc2: img21,
      menuImgSrc3: img31,
      menuImgSrc4: img41
    };
  },
  methods: {
    over1() {
      this.menuImgSrc1 = img12;
    },
    leave1() {
      this.menuImgSrc1 = img11;
    },
    over2() {
      this.menuImgSrc2 = img22;
    },
    leave2() {
      this.menuImgSrc2 = img21;
    },    
    over3() {
      this.menuImgSrc3 = img32;
    },
    leave3() {
      this.menuImgSrc3 = img31;
    },    
    over4() {
      this.menuImgSrc4 = img42;
    },
    leave4() {
      this.menuImgSrc4 = img41;
    },
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 870px;
  width: 1700px;
  margin: 0 auto;
  margin-top: 10px;
  /* background-color: blue; */
  background-image: url('/border1.png');
  background-size: 124%;
  background-repeat: no-repeat;
  background-position: center;
}
h3{
  font-size: 25px;
}
.middle-map{
  height: 825px;
}
.left{
  height: 100%;
  /* background-color: gray; */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
}
.right {
  height: 100%;
  /* background-color: gray; */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
}
.left-line1, .left-line2, .left-line3,.right-line1, .right-line2, .right-line3 {
  position: relative;
}
.left-line1{
  height: 260px;
  width: auto;
  left: 70px;
  transform: rotate(180deg);
}
.right-line1{
  height: 250px;
  width: auto;
  left: 330px;
}
.left-line2{
  height: 270px;
  width: auto;
  bottom: 330px;
  left: 230px;
  transform: rotate(-120deg);
}
.left-line3{
  height: 270px;
  width: auto;
  top: 330px;
  left: 200px;
  transform: rotate(120deg);
}
.right-line2{
  height: 280px;
  width: auto;
  bottom: 330px;
  left: 100px;
  transform: rotate(-60deg);
}
.right-line3{
  height: 270px;
  width: auto;
  top: 330px;
  left: 60px;
  transform: rotate(60deg);
}
.lefttop,.leftbottom,.righttop,.rightbottom{
  cursor: pointer;
  z-index: 100;
  color: whitesmoke;
  text-decoration: none;
}
/* 左上 */
.lefttop{
  /* background-color: rgba(0, 0, 0, 0.1); */
  border-radius: 10px;
  width: 170px;
  height: 200px;
  overflow: hidden;
  position: relative;
  left: -50px;
  bottom: 210px;
}
/* 左下 */
.leftbottom{
  /* background-color: rgba(0, 0, 0, 0.1); */
  border-radius: 10px;
  width: 170px;
  height: 200px;
  overflow: hidden;
  position: relative;
  right: 210px;
  top: 210px;
}
/* 右上 */
.righttop{
  /* background-color: rgba(0, 0, 0, 0.1); */
  border-radius: 10px;
  width: 170px;
  height: 200px;
  overflow: hidden;
  position: relative;
  left: 110px;
  bottom: 210px;
}
/* 右下 */
.rightbottom{
  /* background-color: rgba(0, 0, 0, 0.1); */
  border-radius: 10px;
  width: 170px;
  height: 200px;
  overflow: hidden;
  position: relative;
  right: 50px;
  top: 210px;
}
h3{
  text-align: center;
  position: relative;
  bottom: 22px;
}
.menu-img1,.menu-img2,
.menu-img3,.menu-img4{
  position: relative;
  bottom: 18px;
  right: 10px;
  width: 115%;
  height: auto;
  display: block;
  margin: 0 auto;
  background-size: cover;
}
</style>
